import BaseComponent from "../../pages/BaseComponent";
import "./index.less";
import {View} from "@tarojs/components";
import {observable} from "mobx";
import LogService from "../../service/LogService";
import {observer} from "mobx-react";

@observer
export default class LightSetView extends BaseComponent {

  @observable choseIndex = 0;

  chose = (index) => {
    this.choseIndex = index;
  }

  render() {

    let {contentViews} = this.props;
    if (!contentViews){
      contentViews = [];
      for (let i = 0; i < 4; i++) {
        contentViews.push(<View style={{height: 100}}></View>)
      }
    }

    LogService.debug("contentViews", contentViews);

    const views = [];
    for (let i = 0; i < contentViews.length; i++) {
      let style = 'at-col at-col-3 not_chose';
      if (i == this.choseIndex)
        style = 'at-col at-col-3 chose';

      views.push(
        <View className={style} onClick={() => {
          this.chose(i);
          // LogService.debug("chose+" + i);
        }}>
          <View className='center'>
          </View>
        </View>);
    }

    return (
      <View className='set_table'>
        <View className='at-row'>
          {views}
        </View>

        <View className='tab_content'>
          {
            contentViews[this.choseIndex]
          }
        </View>

      </View>
    );
  }

}
